<html>
<head>
  <title>The source code</title>
    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
</head>
<body  onload="prettyPrint();">
    <pre class="prettyprint lang-js">/*
 * Ext.ux.google.map.StaticMap
 *
 * Project Home: http://code.google.com/p/extuxgoogle/ 
 * API Documentation: http://extuxgoogle.googlecode.com/svn/trunk/docs/index.html 
 *
 * copyright   Copyright 2009 Yuki Naotori
 * license     MIT License
 *
 * The content of this file is an implementation of Ext Core version 3.
 */

Ext.ns('Ext.ux');
Ext.ns('Ext.ux.google');
Ext.ns('Ext.ux.google.map');

<div id="cls-Ext.ux.google.map.StaticMap"></div>/**
 * @class Ext.ux.google.map.StaticMap
 * <p>Utility class which wraps <a href="http://code.google.com/apis/maps/documentation/staticmaps/" target="_blank">Google Static Maps API</a>. This class's {@link #generate generate()} 
 * method takes object literal parameter and returns an image tag (in Ext.Element object) which can
 * be inserted anywhere in the document to display static map.</p>
 * <p><b>Note that this class can be used with both Ext Core and Ext JS</b></p>
 * @static
 * @author Yuki Naotori
 * @version 0.1
 */

Ext.ux.google.map.StaticMap = function(){
	// private vars and methods

	// supported parameters by Google Static Map API
	var FORMATS  = new Array('gif','jpg','jpg-baseline','png8','png32');
	var MAPTYPES = ['roadmap','mobile','satellite','terrain','hybrid','mapmaker-roadmap','mapmaker-hybrid'];

	var MARKER = {
		SIZES: ['tiny','mid','small'],
		COLORS: ['black', 'brown', 'green', 'purple', 'yellow', 'blue', 'gray', 'orange', 'red', 'white']
	};

	var APIURL = 'http://maps.google.com/staticmap?';

	var convertMarkers = function(markers){
		if(!(markers instanceof Array)) return null;
		var len = markers.length;
		var ret = [];
		for(var i=0; i<len; i++){
			var m = markers[i];
			if(m.lat==undefined || m.lng==undefined) continue;

			var str = m.lat.toFixed(10).toString()+','+m.lng.toFixed(10).toString();
			var opt = '';
			if(m.size && MARKER.SIZES.indexOf(m.size)>-1) opt += m.size; 
			if(m.color && MARKER.COLORS.indexOf(m.size)>-1) opt += m.color; 
			if(m.character) opt += m.character[0].toLowerCase();

			if(opt.length>0) str += ','+opt;
			ret.push(str);
		}
		return ret.join('|');
	};


	var	convertCfg = function(cfg){
		var ret = {
			center: '0,0',
			zoom: 0,
			size: '100x100',
			maptype: 'normal',
			sensor: 'false',
			key: null,
			hl: 'en'
		};

		if(cfg.center){
			ret.center = cfg.center;
		}else if(cfg.lat && cfg.lng){
			var lat = (cfg.lat >= -90 && cfg.lat <= 90) ? cfg.lat : 0;
			var lng = (cfg.lng >= -180 && cfg.lng <= 180) ? cfg.lng : 0;
			ret.center = lat+','+lng;	
		}

		if(cfg.zoom) ret.zoom = cfg.zoom;

		if(cfg.span){
			if(typeof cfg.span == 'object' && cfg.span.lat && cfg.span.lng){
			  ret.span = cfg.span.lat+','+cfg.span.lng;
			}else{
				ret.span = cfg.span;
			}
			delete ret.zoom;
		}

		if(cfg.size){
			ret.size = cfg.size;
		}else if(cfg.width && cfg.height){
			var width  = (cfg.width  >= 10 && cfg.width  <= 640) ? cfg.width  : 100;
			var height = (cfg.height >= 10 && cfg.height <= 640) ? cfg.height : 100;
			ret.size = width+'x'+height;	
		}

		if(cfg.format && FORMATS.indexOf(cfg.format)>-1){
			ret.format = cfg.format;
		}

		if(cfg.maptype && MAPTYPES.indexOf(cfg.maptype)>-1){
			ret.maptype = cfg.maptype;
		}else if(cfg.type && MAPTYPES.indexOf(cfg.type)>-1){
			ret.maptype = cfg.type;
		}

		ret.sensor  = cfg.sensor || ret.sensor;
		ret.key  = cfg.key || ret.key;
		ret.hl  = cfg.hl || ret.hl;

		if(cfg.markers){
			ret.markers = convertMarkers(cfg.markers); 
		}
		return ret;
	};

	return {
    <div id="cfg-Ext.ux.google.map.StaticMap-key"></div>/**
     * @cfg String key
     * API Key provided by Google (details are <a href="http://code.google.com/apis/maps/signup.html">here</a>)
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-hl"></div>/**
     * @cfg String hl
     * Lnaguage for the map. 
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-center"></div>/**
     * @cfg String center
     * The center lat/lng of the map in '[lat]x[lng]' format (e.g. '32.123x123.456')
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-lat"></div>/**
     * @cfg Float lat
     * The center latitude of the map. Must be between -90 and 90. If 'center' is passed, this will be ignored 
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-lng"></div>/**
     * @cfg Float lng
     * The center longitude of the map. Must be between -180 and 180. If 'center' is passed, this will be ignored 
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-zoom"></div>/**
     * @cfg Integer zoom
     * The zoom level of the map. Must be between -0 and 18. If 'span' is passed, this will be ignored 
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-span"></div>/**
     * @cfg String/Object span
     * The latitide/longitude spans of the map in degrees. Either in '[lat]x[lng]' format (e.g. '2x3') or object literal with 
		 * 'lat' and 'lng' params
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-size"></div>/**
     * @cfg String size
     * The size of the map image in pixels in '[width]x[height]' format (e.g. '300x200')
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-width"></div>/**
     * @cfg Integer width
     * The width of the map image in pixels. If 'size' is passed, this will be ignored (max width is 640) 
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-height"></div>/**
     * @cfg Integer height
     * The height of the map image in pixels. If 'size' is passed, this will be ignored (max height is 640)
		 *
		 */

    <div id="cfg-Ext.ux.google.map.StaticMap-format"></div>/**
     * @cfg String format
     * Image format for the map. Allowed formats are:
     * <div class="mdetail-params"><ul>
     * <li>gif</li>
     * <li>jpg</li>
     * <li>jpg-baseline</li>
     * <li>png8</li>
     * <li>png32</li>
     * </ul></div>
     */      

    <div id="cfg-Ext.ux.google.map.StaticMap-maptype"></div>/**
     * @cfg String maptype
     * Map type. Allowed map types are:
     * <div class="mdetail-params"><ul>
     * <li>roadmap</li>
     * <li>mobile</li>
     * <li>satellite</li>
     * <li>terrain</li>
     * <li>hybrid</li>
     * <li>mapmaker-roadmap</li>
     * <li>mapmaker-hybrid</li>
     * </ul></div>
     */      

    <div id="cfg-Ext.ux.google.map.StaticMap-markers"></div>/**
     * @cfg Array markers
     * Array of markers config objects to display on the map
     * <div class="mdetail-params"><ul>
     * <li><b>lat</b>: float<div class="sub-desc">latitude for the marker (-90~90, default to 0)</div></li>
     * <li><b>lng</b>: float<div class="sub-desc">longitude for the marker (-180~180, default to 0)</div></li>
     * <li><b>size</b>: string<div class="sub-desc">size of the marker ('tiny', 'small', 'mid')</div></li>
     * <li><b>color</b>: string<div class="sub-desc">color of the marker ('black', 'brown', 'green', 'purple', 'yellow', 'blue', 'gray', 'orange', 'red', and 'white')</div></li>
     * <li><b>character</b>: string<div class="sub-desc">an alphanumeric character to display inside the marker</div></li>
     * </ul></div>
		 */

    <div id="method-Ext.ux.google.map.StaticMap-generate"></div>/**
     * Create an image tag with Google Static Map
     * @method generate
     * @param {Object} config Config options
     * @return {Ext.Element} Element
     */
		generate: function(cfg){
			var params = [];
			var cfg = convertCfg(cfg);

      var size = cfg.size.split('x');

			for(var key in cfg){
				params.push(key+'='+cfg[key]);	
			}
			var url = APIURL + params.join('&');

			var el = Ext.getBody().createChild({
				tag: 'img',
				cls: 'ext-google-staticmap-img',
        width: size[0],
        height: size[1],
				src: url
			});

			return el;	
		}
	};
}();
</pre>    
</body>
</html>